<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        body{
            background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532060307123&di=3f062d52210ad30b868f736440d6dc7f&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2%2F53cf2c2463e2c.jpg");
        }
        form{
            width: 650px;
            margin: auto;
            border: solid grey;
            padding: 20px;
        }
        .wai{
            height: 50px;
            margin: 20px;
        }
        a {
            color: dodgerblue;
            text-decoration: none;
        }
        label{
            width: 50px;
            height: 30px;
            display: block;
            text-align: right;
            float: left;
            margin-right: 10px;
            margin-top: 6px;
        }
        .kong{
            margin-right: 10px;
            height: 30px;
            width: 250px;
            padding-right: 0px;
        }
        .regist{
            background-color: dodgerblue;
            width: 350px;
            height: 40px;
            border: none
        }
        .check{
            width: 200px;
            float: right;
            font-size: small;
            color: gray;
        }
    </style>
</head>
<body>
<form>
    <div class="wai" id="div1">
        <label for="username">用户名</label>
        <input required="required" onfocus="check_username1()" onblur="check_username2()" class="kong" type="text" id="username" name="username" value placeholder="请设置用户名">
        <span class="check" id="check1"></span>
    </div>
    <div class="wai">
        <label for="tel">手机号</label>
        <input onfocus="check_tel1()" onblur="check_tel2()" class="kong" type="tel" id="tel" name="tel" value placeholder="可用于登录和找回密码">
        <span class="check" id="check2"></span>
    </div>
    <div class="wai">
        <label for="passwd">密码</label>
        <input onfocus="check_passwd1()" onblur="check_passwd2()" class="kong" type="password" id="passwd" name="passwd" value placeholder="请设置登录密码">
        <span id="checkimg1"></span>
        <span class="check" id="check3"></span>
    </div>
    <div class="wai">
        <label for="test">验证码</label>
        <input onfocus="check_test1()" onblur="check_test2()" type="text" id="test" name="test" value placeholder="请输入验证码" style="width: 120px;height:30px;margin-left: 1px ">
        <input type="button" name="click" id="click" value="获取短信验证码" style="width: 125px;height: 36px">
        <span class="check" id="check4"></span>
    </div>
    <div style="font-size: small" class="wai">
        <input type="checkbox">阅读并接受<a href="https://passport.baidu.com/static/passpc-account/html/protocal.html">《百度用户协议》</a>及<a href="https://www.baidu.com/duty/yinsiquan.html">《百度隐私权保护声明》</a>
    </div>
    <div class="wai">
        <input type="submit" name="registe" value="注册" required="required" class="regist" style="border-radius: 10px">
    </div>
</form>
<script>
    function check_username1() {
        document.getElementById('check1').innerHTML = '长度应在6~10之间<br>设置后不可更改';
    }
    function check_username2() {
        var x = document.getElementById('username').value;
        if (x.length < 6 || x.length > 10) {
            document.getElementById('check1').innerHTML = '格式错误';
        }
        else {
//            var okimg = document.createElement('img');
//            okimg.src = '../img/ok_small.png';
//            document.getElementById('check1').innerHTML = "";
//            var child2 = document.getElementById('check1');
//            child2.appendChild(okimg);
            $(document).ready(
                function () {
                    $.ajax({
                        url: 'username.txt',
                        type: 'GET',
                        async: true,
                        data: {username: $('#username').val()},
                        dataType: 'json',
                        beforeSend: function (xhr) {
                            console.log('发送前')
                        },
                        success: function (data, textStatus, jqXHR) {
                            console.log(data);
                            console.log(typeof(data));
                            var l = data.length;
                            ans="yes";
                            for (i = 0; i < l; i++) {
                                if ($("#username").val() == data[i]) {
                                    $("#check1").html('重名了');
                                    ans="no";
                                    break
                                }
                            }
                            if (ans="yes"){
                                console.log(ans);
                                $("#check1").html('没重名');
//                                var okimg = document.createElement('img');
//                                okimg.src = '../img/ok_small.png';
//                                document.getElementById('check1').innerHTML = "";
//                                var child2 = document.getElementById('check1');
//                                child2.appendChild(okimg);
                            }
                        },
                        error: function (xhr, textStatus) {
                            console.log('错误');
                        },
                        complete: function () {
                            console.log('结束')
                        }

                    })
                }
            )
        }
    }
//                        $.post("http://192.168.0.123:5000/check_form",{"username":$("username").val()},function (data) {
//    //                        alert(data);
//    //                        $("#check1").html(data)
//                            if (data == 400){
//                                $("#check1").html('服务器说不可以')
//                            }
//                        })
    function check_tel1() {
        document.getElementById('check2').innerHTML = '请输入中国大陆手机号<br>其他用户不可见';
    }
    function check_tel2() {
        var x = document.getElementById('tel').value;
        if (x.length !== 11){
            document.getElementById('check2').innerHTML = '格式错误';
        }
        else {
            var okimg = document.createElement('img');
            okimg.src = '../img/ok_small.png';
            document.getElementById('check2').innerHTML="";
            var child2 =  document.getElementById('check2');
            child2.appendChild(okimg);
        }
    }
    function check_passwd1() {
        document.getElementById('check3').innerHTML = '密码为6-14个字符';
    }
    function check_passwd2() {
        var x = document.getElementById('passwd').value;
        if (x.length<6 || x.length>14){
            document.getElementById('check3').innerHTML = '格式错误';
            return false;
        }
        else {
            var okimg = document.createElement('img');
            okimg.src = '../img/ok_small.png';
            document.getElementById('check3').innerHTML="";
            var child2 =  document.getElementById('check3');
            child2.appendChild(okimg);
        }
    }
    function check_test1() {
        document.getElementById('check4').innerHTML = '请输入手机收到的验证码';
    }
    function check_test2() {
        var x = document.getElementById('test').value;
        if (x.length !== 4){
            document.getElementById('check4').innerHTML = '验证码错误';
            return false;
        }
        else {
            var okimg = document.createElement('img');
            okimg.src = '../img/ok_small.png';
            document.getElementById('check4').innerHTML="";
            var child2 =  document.getElementById('check4');
            child2.appendChild(okimg);
        }
    }
</script>
</body>
</html>